var imid = $(".mid"),
    ibig = $(".big"),
    ismall = $(".small img"),
    tbig = $(".big img");

var midArr = ["http://www.jq22.com/img/cs/500x500-1.png", "http://www.jq22.com/img/cs/500x500-2.png", "http://www.jq22.com/img/cs/500x500-3.png"];
var bigArr = ["http://www.jq22.com/img/cs/500x500-1.png", "http://www.jq22.com/img/cs/500x500-2.png", "http://www.jq22.com/img/cs/500x500-3.png"];
ismall.each(function(i) {
    $(this).click(function() {
        $(".mid img").attr("src", midArr[i])
        tbig.attr("src", bigArr[i])
        ismall.removeClass("active")
        $(this).addClass("active")
    })
    imid.mousemove(function(a) {
        var evt = a || window.event
        ibig.css('display', 'block')
        var y = evt.clientY - ($(".mid").offset().top - $(document).scrollTop()) - 87;
        var x = evt.clientX - ($(".mid").offset().left - $(document).scrollLeft()) - 87;

        if (x <= 0) {
            x = 0;
        }
        if (y <= 0) {
            y = 0;
        }
        if (x >= 175) {
            x = 175
        }
        if (y >= 175) {
            y = 175
        }
        $("span").css({
            'left': x,
            'top': y
        })
        var yy = y / 350 * 500
        var xx = x / 350 * 500
        $('p').text(xx + "---" + yy);
        tbig.css({
            'left': -xx,
            'top': -yy
        })
    })
    imid.mouseout(function() {
        ibig.css('display', 'none')
    })

})